<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../styles/css/index.css">
  <script src="../lib/layui/layui.js"></script>
  <script src="../lib/JQuery.js"></script>
  <script src="../lib/echarts.js"></script>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: calc(100% - 2px);
      width: 100%;
    }



    .sanjiao {
      border: 7px solid red;
      width: 0;
      height: 0;
      border-top-color: transparent;
      border-left-color: transparent;
      border-bottom-color: transparent;
      position: absolute;
      top: 33%;
      right: 0px;
      cursor: pointer;
    }
    .rightBox-top {
      border-radius: 10px;
      padding: 20px;
      margin: 10px;
    }

    .topcon {
      height: 50px;
      border-bottom: 1px solid #ccc;
      line-height: 50px;
      text-indent: 20px;
      font-size: 16px;
      letter-spacing: 3px;
      font-weight: 500;
      border-left: 4px solid #009688;
    }

    .form_element_c {
      padding-top: 20px;
    }

    .bottomBox {
      width: calc(33% - 12px);
      height: 280px;
      border: 1px solid #009688;
      float: left;
      border-radius: 5px;
      margin: 0 5px 10px;
    }

    .litbox {
      height: 30px;
      color: #fff;
      background: #009688;
      line-height: 30px;
      padding-left: 20px;
    }

    .boxEcharts {
      width: 250px;
      height: 250px;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="headTitle">
    环境监测
  </div>
  <div class="sideListout">
    <div class="leftBox">
      <div id="test1"></div>
      <div class="hidden">
        <div class="sanjiao" state="false"></div>
      </div>
    </div>
    <div class="rightBox">
      <div class="rightBox-top">
        <div class="bottomcon" style="overflow: hidden;margin-top: 20px;">
          <ul style="width: 100%;">
            <li class="bottomBox">
              <div class="litbox">光照度</div>
              <div id="boxEcharts1" class="boxEcharts"></div>
            </li>
            <li class="bottomBox">
              <div class="litbox">空气湿度</div>
              <div id="boxEcharts2" class="boxEcharts"></div>
            </li>
            <li class="bottomBox">
              <div class="litbox">空气温度</div>
              <div id="boxEcharts3" class="boxEcharts"></div>
            </li>
            <li class="bottomBox">
              <div class="litbox">土壤湿度</div>
              <div id="boxEcharts4" class="boxEcharts"></div>
            </li>
            <li class="bottomBox">
              <div class="litbox">土壤温度</div>
              <div id="boxEcharts5" class="boxEcharts"></div>
            </li>
            <li class="bottomBox">
              <div class="litbox">二氧化碳浓度</div>
              <div id="boxEcharts6" class="boxEcharts"></div>
            </li>
          </ul>
        </div>
      </div>
      <div class="rightBox-top">
        <div class="topcon">
          传感器历史数据报表
        </div>
        <div class="form_element_c">
          <div class="layui-row">
            <div class="layui-col-md9">
              <div class="layui-form-item">
                <label class="layui-form-label">选择时间</label>
                <div class="layui-input-block">
                  <input style="width:35%;float:left;" type="text" name="title" required="" lay-verify="required"
                    placeholder="请输入" autocomplete="off" class="layui-input">
                  <label class="layui-form-label" style="text-align: center">至</label>
                  <input style="width:35%;float:left;" type="text" name="title" required="" lay-verify="required"
                    placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
            <div class="layui-col-md3">
              <a href="###" class="layui-btn">查询</a>
              <a href="###" class="layui-btn">重置</a>
            </div>
          </div>
        </div>
        <table id="demoTable" lay-filter="test"></table>
      </div>
    </div>
  </div>
</body>
<script>
  /*光照度*/
  var myChart = echarts.init(document.getElementById('boxEcharts1')),
    option1 =  {
        title: {
            x: "center",
            textStyle: {
                fontSize: 14
            },
            top: 0
        },
        toolbox: {
            show: !0,
            right: 10,
            feature: {
                saveAsImage: {
                    type: "png",
                    pixelRatio: 2
                }
            }
        },
        tooltip: {
            formatter: "{a} <br/>{c}%"
        },
        series: [{
            min: 0,
            max: 100,
            name: "光照度",
            type: "gauge",
            center: ["50%", "60%"],
            radius: "85%",
            detail: {
                formatter: "{value}klux",
                fontSize: 18
            },
            data: [{
                value: 45         //值
            }],
            axisTick: {            // 坐标轴小标记
                length: 18,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 12,
                    shadowBlur: 0,
                    color: [[.5, "#2f4554"], [.5, "#61a0a8"], [1, "#c23531"]]
                }
            }
        }]
    }
  myChart.setOption(option1);
  /*空气湿度*/
  var myChart = echarts.init(document.getElementById('boxEcharts2')),
    option2 =  {
        title: {
            x: "center",
            textStyle: {
                fontSize: 14
            },
            top: 0
        },
        toolbox: {
            show: !0,
            right: 10,
            feature: {
                saveAsImage: {
                    type: "png",
                    pixelRatio: 2
                }
            }
        },
        tooltip: {
            formatter: "{a} <br/>{c}%"
        },
        series: [{
            min: 0,
            max: 100,
            name: "空气湿度",
            type: "gauge",
            center: ["50%", "60%"],
            radius: "85%",
            detail: {
                formatter: "{value}%",
                fontSize: 18
            },
            axisTick: {            // 坐标轴小标记
                length: 18,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto'
                }
            },
            data: [{
                value: 45         //值
            }],
            axisLine: {
                lineStyle: {
                    width: 12,
                    shadowBlur: 0,
                    color: [[.5, "#2f4554"], [.5, "#61a0a8"], [1, "#c23531"]]
                }
            }
        }]
    }
  myChart.setOption(option2);
  /*空气温度开始*/
  var myChart = echarts.init(document.getElementById('boxEcharts3'));
  option3 =  {
      backgroundColor: '#ffffff',
      title: {
          show: false
      },
      series: [{
          name: '',
          type: "gauge",
          detail: {
              formatter: '{value}℃',
              fontSize: 15,
              offsetCenter: [0, "50%"],
              y: 200
          },
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          radius: "80%",
          //splitNumber: 3,
          center: ["50%", "65%"],
          axisLine: {
              show: true,
              lineStyle: {
                  width: 14,
                  shadowBlur: 0,
                  color: [
                      [0.5, '#91c7a1'],
                      [0.75, '#63869e'],
                      [1, '#C23531']
                  ]
              }
          },

          //修改指标
          itemStyle: {
              normal: {
                  //color: "rgba(255, 255, 255, 0.8)",
                  shadowBlur: 10
              }
          },
          data: [{
              value: 28,
              name: ''
          }]
      }]
  }
  myChart.setOption(option3);
  /*空气温度结束*/

  /*土壤湿度*/
  var myChart = echarts.init(document.getElementById('boxEcharts4'));
  option4 = {
      title: {
          x: "center",
          textStyle: {
              fontSize: 14
          },
          top: 0
      },
      toolbox: {
          show: !0,
          right: 10,
          feature: {
              saveAsImage: {
                  type: "png",
                  pixelRatio: 2
              }
          }
      },
      tooltip: {
          formatter: "{a} <br/>{c}%"
      },
      series: [{
          min: 0,
          max: 100,
          name: "空气湿度",
          type: "gauge",
          center: ["50%", "60%"],
          radius: "85%",
          detail: {
              formatter: "{value}%",
              fontSize: 18
          },
          data: [{
              value: 45         //值
          }],
          axisTick: {            // 坐标轴小标记
              length: 18,        // 属性length控制线长
              lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
              }
          },
          axisLine: {
              lineStyle: {
                  width: 12,
                  shadowBlur: 0,
                  color: [[.5, "#2f4554"], [.5, "#61a0a8"], [1, "#c23531"]]
              }
          }
      }]
  }
  myChart.setOption(option4);
  /*土壤温度*/
  var myChart = echarts.init(document.getElementById('boxEcharts5'));
  option5 = {
      backgroundColor: '#ffffff',
      title: {
          show: false
      },
      series: [{
          name: '',
          type: "gauge",
          detail: {
              formatter: '{value}℃',
              fontSize: 15,
              offsetCenter: [0, "50%"],
              y: 200
          },
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          radius: "80%",
          //splitNumber: 3,
          center: ["50%", "65%"],
          axisLine: {
              show: true,
              lineStyle: {
                  width: 14,
                  shadowBlur: 0,
                  color: [
                      [0.5, '#91c7a1'],
                      [0.75, '#63869e'],
                      [1, '#C23531']
                  ]
              }
          },

          //修改指标
          itemStyle: {
              normal: {
                  //color: "rgba(255, 255, 255, 0.8)",
                  shadowBlur: 10
              }
          },
          data: [{
              value: 28,
              name: ''
          }]
      }]
  }
  myChart.setOption(option5);
  /*二氧化碳浓度echarts开始*/
  var myChart6 = echarts.init(document.getElementById('boxEcharts6'));
  var bgImg =
    '';

  var fillImg =
    '';
  var chartData = [{
    name: '二氧化碳',
    value: 30
  }];
  var bgData = [];
  var itemData = [];

  // 取出每一条数据value,作为显示数据
  chartData.forEach(function (items, index) {
    itemData.push(items.value);
  })

  // 取出所有数据最大值,作为背景象形柱图数据
  chartData.forEach(function (items, index) {
    bgData.push({
      name: items.name,
      value: Math.max.apply(null, [100])
    });
  })
  // 所有数据最大值
  var maxValue = 100;
  // 字体 distance放大参数
  var scale = 1;
  //富文本配置
  var rich = {
    white: {
      color: "#fff",
      align: 'left',
      fontSize: 18 * scale,
      padding: [0, 0]
    },
  };
  var option = {
    tooltip: {
      formatter: '{b} : {c}',
    },
    grid: {
      left: '3%',
      right: '6%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: (function (data) {
        var arr = [];
        data.forEach(function (items) {
          arr.push(items.name);
        });
        return arr;
      })(chartData),



      boundaryGap: ['20%', '20%'],
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        textStyle: {
          fontSize: 16 * scale,
          color: '#3fdaff'
        }
      }
    }],
    yAxis: [{
      type: 'value',
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: true,
        inside: true,
        length: 10 * scale,
        lineStyle: {
          color: '#0b5263'
        }
      },
      axisLabel: {
        textStyle: {
          color: '#0b5263',
          fontSize: 14 * scale
        }
      },
    }],
    series: [
      //背景
      {
        name: 'bg',
        type: 'pictorialBar',
        barWidth: '45%',
        // barGap: '0%',
        silent: true,
        label: {
          normal: {
            show: true,
            position: "top",
            distance: 20 * scale,
            formatter: function (params) {
              var stuNum = 0;
              chartData.forEach(function (value, index, array) {
                if (params.name == value.name) {
                  stuNum = value.value;
                }
              })
              return stuNum + 'm/s';
            },
            textStyle: {
              color: "#ffc72b",
              fontSize: 20 * scale
            },
            rich: rich
          }
        },
        symbol: 'image://' + bgImg,
        symbolClip: false,
        symbolBoundingData: maxValue,
        symbolSize: [52, '100%'],
        data: bgData
      },
      {
        name: '数据',
        type: 'pictorialBar',
        barWidth: '45%',
        barGap: '-100%',
        data: chartData,
        z: 3,
        symbol: 'image://' + fillImg,
        symbolClip: true,
        symbolBoundingData: maxValue,
        symbolSize: [52, '100%']
      },
    ]
  };
  myChart6.setOption(option);
  /*二氧化碳浓度echarts结束*/


  /*树形结构*/
  layui.use(['tree', 'util', 'table', 'jquery'], function () {
    var table = layui.table;
    var $ = jQuery = layui.$;
    var tree = layui.tree,
      layer = layui.layer,
      util = layui.util,
      nodes = [
          {
        title: '江西',
        id: 1,
        children: [
            {
          title: '南昌',
          id: 1000,
          children: [{
            title: '青山湖区',
            id: 10001
          }, {
            title: '高新区',
            id: 10002
          }]
        }, {
          title: '九江',
          id: 1001
        }, {
          title: '赣州',
          id: 1002
        }]
      }, {
        title: '广西',
        id: 2,
        children: [{
          title: '南宁',
          id: 2000
        }, {
          title: '桂林',
          id: 2001
        }]
      }, {
        title: '高新区',
        id: 10002
      }]
    //渲染树
    tree.render({
      elem: '#test1',
      data: nodes,
      showCheckbox: true,
      oncheck: function (obj) { //勾选时触发获取勾选数据
        alert(obj)
      },
      showLine: false //是否开启连接线
    });

    //渲染表格
    table.render({
      elem: '#demoTable',
      //					height: 315
      //  ,url: '/demo/table/user/' //数据接口
      //						,
      page: true //开启分页
        ,
      cols: [
        [ //表头
          {
            field: 'id',
            title: '设备标号',
            width: '10%',
            align: 'center',
            fixed: 'left'
          }, {
            field: 'username',
            title: '采集时间',
            align: 'center',
            width: '10%'
          }, {
            field: 'sex',
            title: '风向',
            align: 'center',
            width: '10%'
          }, {
            field: 'dklx',
            title: '风速',
            align: 'center',
            width: '10%'
          }, {
            field: 'city',
            title: '光照度',
            align: 'center',
            width: '10%'
          }, {
            field: 'sign',
            title: '空气温度',
            align: 'center',
            width: '10%'
          }, {
            field: 'area',
            title: '空气湿度',
            align: 'center',
            width: '10%'
          }, {
            field: 'shzt',
            title: '土壤水分',
            align: 'center',
            width: '10%'
          }, {
            field: 'shzt',
            title: '土壤水分',
            align: 'center',
            width: '10%'
          }, {
            field: 'shzt',
            title: '土壤温度',
            align: 'center',
            width: '10%'
          }, {
            field: 'shzt',
            title: '电池电量',
            align: 'center',
            width: '10%'
          }, {
            field: 'shzt',
            title: '系统5V电压',
            align: 'center',
            width: '10%'
          }, {
            field: 'shzt',
            title: '雨量',
            align: 'center',
            width: '10%'
          }
        ]
      ],
      data: [
          {
        "id": "10001",
        "username": "地块",
        "email": "xianxin@layui.com",
        "sex": "男",
        "dklx": "水田",
        "city": "浙江杭州",
        "sign": "人生恰似一场修行",
        "experience": "116",
        "ip": "192.168.0.8",
        "logins": "108",
        "area": "价目是",
        "shzt": "2016-10-14"
      }, {
        "id": "10002",
        "username": "地块",
        "email": "xianxin@layui.com",
        "sex": "男",
        "dklx": "水田",
        "city": "浙江杭州",
        "sign": "人生恰似一场修行",
        "experience": "12",
        "ip": "192.168.0.8",
        "logins": "106",
        "area": "价目是",
        "shzt": "2016-10-14",
      }, {
        "id": "10003",
        "username": "地块",
        "email": "xianxin@layui.com",
        "sex": "男",
        "dklx": "水田",
        "city": "浙江杭州",
        "sign": "人生恰似一场修行",
        "experience": "65",
        "ip": "192.168.0.8",
        "logins": "106",
        "area": "价目是",
        "shzt": "2016-10-14"
      }, {
        "id": "10004",
        "username": "地块",
        "email": "xianxin@layui.com",
        "sex": "男",
        "dklx": "水田",
        "dklx": "水田",
        "city": "浙江杭州",
        "sign": "人生恰似一场修行",
        "experience": "666",
        "ip": "192.168.0.8",
        "logins": "106",
        "area": "价目是",
        "shzt": "2016-10-14"
      }, {
        "id": "10005",
        "username": "地块",
        "email": "xianxin@layui.com",
        "sex": "男",
        "dklx": "水田",
        "city": "浙江杭州",
        "sign": "人生恰似一场修行",
        "experience": "86",
        "ip": "192.168.0.8",
        "logins": "106",
        "area": "价目是",
        "shzt": "2016-10-14"
      }, {
        "id": "10006",
        "username": "地块",
        "email": "xianxin@layui.com",
        "sex": "男",
        "dklx": "水田",
        "city": "浙江杭州",
        "sign": "人生恰似一场修行",
        "experience": "12",
        "ip": "192.168.0.8",
        "logins": "106",
        "area": "价目是",
        "shzt": "2016-10-14"
      }, {
        "id": "10007",
        "username": "地块",
        "email": "xianxin@layui.com",
        "sex": "男",
        "dklx": "水田",
        "city": "浙江杭州",
        "sign": "人生恰似一场修行",
        "experience": "16",
        "ip": "192.168.0.8",
        "logins": "106",
        "area": "价目是",
        "shzt": "2016-10-14"
      }, {
        "id": "10008",
        "username": "地块",
        "email": "xianxin@layui.com",
        "sex": "男",
        "dklx": "水田",
        "city": "浙江杭州",
        "sign": "人生恰似一场修行",
        "experience": "106",
        "ip": "192.168.0.8",
        "logins": "106",
        "area": "价目是",
        "shzt": "2016-10-14"
      }]
    });
    $('.demoTable .layui-btn').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

  });
</script>
<script src="../js/index.js"></script>
</html>